<template>
	<view class="page">
		<!-- 打卡记录 -->
		<view style="display: flex; flex-direction: column;">
			<view class="content" v-for="(item, index) in attendList" :key="index">
				<view class="attend_info" style="display: flex; justify-content: space-between;">
					
					<view style="display: flex; flex-direction: column;">
						<text style="float: right; color: #222222; font-size: 30rpx; margin-bottom: 10rpx;">{{tools.getTime(item.time)}}</text>
						<text style="color: #222222; font-size: 26rpx;">{{item.class}}</text>
					</view>
					
					<view style="display: flex; flex-direction: column">
						<view style="text-align: right; color: #FD973F;">{{item.status}}</view>
						<text style="margin-top: 10rpx; font-size: 26rpx; color: #999999;">{{item.institution}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk';

	const db = cloudbase.database();
	export default {
		data() {
			return {
				attendList: []
			}
		},
		onLoad() {
			// 获取打卡记录
			db.collection('user').where({
				openId: getApp().globalData.userInfo.openId
			}).field({
				attendanceList: true
			}).get().then(res => {
				console.log(res.data);
				this.attendList = res.data[0].attendanceList;
			})
		},
		methods: {

		}
	}
</script>

<script module="tools" lang="wxs">
	function getTime(val) {
		if(!val) return;
		return val.split("~")[0];
	}
	module.exports = {
		getTime: getTime
	}
</script>

<style>
	page {
		background-color: #F3F5F7;
	}
	.page {
		width: 750rpx;
		/* height: 1812rpx; */
		/* height: 1020rpx; */
		/* padding-bottom: 60px; */
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.content {
		width: 702rpx;
		height: 161rpx;
		margin-top: 24rpx;
		margin-left: auto;
		margin-right: auto;
		background-color: #FFFFFF;
		border-radius: 32rpx;
	}

	.attend_info {
		width: 650rpx;
		height: 100rpx;
		margin-top: 35rpx;
		margin-left: 35rpx;
		margin-right: 30rpx;
		background-color: #FFFFFF;
		border-radius: 0rpx;
	}
</style>
